<template>
	<view class="postFee">
		<u-navbar :title="$t('discover.information')" :autoBack="false" @leftClick="leftClick(urlIndex)"
			bgColor="#F6F6F6" titleStyle="color: #000000" placeholder>
		</u-navbar>
		<view class="content-box" v-if="dataList && dataList.length > 0">
			<view class="item-box" v-for="item in dataList" :key="item.id">
				<view class="top-box">
					<view class="icon-deadline"></view>
					<view class="time">{{ item.releaseTime }}</view>
					<view class="status">{{ item.status == 1 ? $t("information.OnShelves") : $t("information.HasBeenRemoved") }}</view>
				</view>
				<view class="middle-box" @click="gotoPage(`/pagesDiscover/information/InfoDetail?id=${item.id}`)">
					<view class="main-pic">
						<image :src="item.image" class="pic" mode="aspectFill"></image>
					</view>
					<view class="right-box">
						<view class="title omit">{{ item.title }}</view>
						<view class="price">{{ getCoinName(item.currencyId) }}{{ item.price }}</view>
					</view>
				</view>
				<view class="btn-box">
					<view v-if="item.status != 1" class="btn gray" @click="deleteItem(item)" style="margin-right: 20upx;">{{ $t("contacts.delete") }}</view>
					<view v-if="item.status == 1" class="btn green" @click="revokeItem(item)">{{ $t("Revoke") }}</view>
					<view v-else class="btn gray" @click="editorItem(item)">{{ $t("Edit") }}</view>
				</view>
			</view>
		</view>
		<u-empty v-else :text="$t('information.EmptyDataList')" textColor="#878787" textSize="14" width="104" height="100" marginTop="80" icon="/static/image/bourse/none_order.png"></u-empty>
	</view>
</template>

<script>
import { queryInfoList, infoPut, deleteInfo } from "@/services/information.js"
import { getCurrencyList } from '@/services/bourse.js'
export default {
	data() {
		return {
			urlIndex: 'postInfo',
			language: '',
			searchForm: {
				pageSize: 20,
				pageNum: 1,
				userId: this.$store.state.userInfo.userId || uni.getStorageSync('userId')
			},
			currencyList: [],
			dataList: [],
			total: 0,
		}
	},
	methods: {
		gotoPage(url, type) {
			if (type == 1) {
				uni.switchTab({
					url,
				});
				return;
			}
			uni.navigateTo({
				url,
			});
		},
		async getCurrency() {
			const resp = await getCurrencyList()
			if (resp.result.code === 200) {
				this.currencyList = resp.result.data
			}
		},
		getCoinName(currencyId) {
			const coinIndex = this.currencyList.findIndex(value => String(value.id) === String(currencyId))
			return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : ''
		},
		async getMainList() {
			uni.showLoading()
			const resp = await queryInfoList(this.searchForm);
			uni.stopPullDownRefresh();
			uni.hideLoading()
      if (resp.result.code === 200) {
        this.total = resp.result.total;
        let list = resp.result.rows.map(item => {
					let place = item.place
          try {
            item.placeNew = place ? this.getRegionNameList(JSON.parse(place)).join(',') : ''
          } catch {
            item.placeNew = place
          }
          return {
            ...item,
						// releaseTime: item.releaseTime ? formatTime("yyyy/MM/dd hh:mm:ss", item.releaseTime) : null,
          }
        });
        if (this.searchForm.pageNum == 1) {
          this.dataList = list ? list : [];
        } else {
          this.dataList = [...this.dataList, ...list];
        }
      }
		},
		deleteItem(item) {
			uni.showModal({
				title: this.$t("contacts.delete"),
				content: this.$t("information.isDeleteTip", {msg: item.title}),
				cancelText: this.$t("cancel"), // 取消按钮的文字  
				confirmText: this.$t("confirm"), // 确认按钮的文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				success: (res) => {
					if (res.confirm) {
						this.toDeleteInfo(item)
					}
				}
			})
		},
		revokeItem(item) {
			uni.showModal({
				title: this.$t("Revoke"),
				content: this.$t("feeServices.isRevoke"),
				cancelText: this.$t("cancel"), // 取消按钮的文字  
				confirmText: this.$t("confirm"), // 确认按钮的文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				success: (res) => {
					if (res.confirm) {
						this.toChangeInfo(item)
					}
				}
			})
		},
		editorItem(item) {
			uni.navigateTo({
				url: "/pagesDiscover/information/InfoRelease?id=" + item.id,
			});
		},
		async toChangeInfo(obj) {
			uni.showLoading()
			const resp = await infoPut({
        ...obj,
        status: 0
      })
			uni.hideLoading()
			if (resp.result.code === 200) {
				uni.showToast({
					icon: 'none',
					title: this.$t('feeServices.revokeSuccess')
				})
				setTimeout(() => {
					this.refresh()
				}, 1000)
			}
		},
		async toDeleteInfo(obj) {
			uni.showLoading()
			const resp = await deleteInfo(obj.id)
			uni.hideLoading()
			if (resp.result.code === 200) {
				uni.showToast({
					icon: 'none',
					title: this.$t('information.deleteSuccess')
				})
				setTimeout(() => {
					this.refresh()
				}, 1000)
			}
		},
		refresh() {
			this.dataList = []
			this.total = 0
			this.searchForm.pageNum = 1
			this.getMainList()
		},
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.refresh()
	},
	onReachBottom() {
		if (this.total > this.searchForm.pageNum * this.searchForm.pageSize) {
			this.searchForm.pageNum++;
			this.getMainList();
		}
	},
	onShow() {
		this.refresh()
	},
	onLoad() {
		this.language = uni.getLocale();
		this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
		this.getCurrency()
	},
}
</script>

<style lang="scss" scoped>
.omit {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: break-all;
}

.postFee {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.content-box {
		width: 100%;

		.item-box {
			width: 100%;
			height: fit-content;
			padding: 20upx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20upx;
			margin-top: 30upx;

			&:first-child {
				margin-top: 0upx;
			}

			.top-box {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 28upx;
				font-weight: 400;
				.icon-deadline {
					width: 48upx;
          height: 48upx;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url('@/static/image/deadline.png');
				}
				.time {
					color: #606665;
					line-height: 40upx;
				}
				.status {
					margin-left: auto;
					color: #61BDB2;
					line-height: 40upx;
				}
			}

			.middle-box {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 20upx 0upx;
				border-bottom: 2upx solid rgba(0,0,0,0.05);
				.main-pic {
					width: 164upx;
					height: 164upx;
					background: #F0F0F0;
					border-radius: 20upx;
					overflow: hidden;
					margin-right: 20upx;
					.pic {
						width: 100%;
						height: 100%;
					}
				}
				.right-box {
					flex: 1;
					height: 164upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 32upx;
					font-weight: 500;
					line-height: 48upx;
					.title {
						width: 100%;
						color: #000000;
						-webkit-line-clamp: 2 !important;
						line-clamp: 2 !important;
					}
					.price {
						width: 100%;
						color: #FE6600;
					}
				}
			}

			.btn-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-top: 20upx;

				.btn {
					width: fit-content;
					height: 64upx;
					border-radius: 64upx;
					padding: 0upx 24upx;
					display: flex;
					justify-content: center;
					align-items: center;
					white-space: nowrap;
					font-size: 28upx;
					font-weight: 400;
					line-height: 40upx;
				}

				.green {
					color: #FFFFFF;
					background: #61BDB2;
				}

				.gray {
					border: 2upx solid rgba(135, 135, 135, 0.6);
					color: #878787;
					box-sizing: border-box;
				}
			}
		}
	}
}</style>